<template>
    <el-table-column
            :type="editor === 'index' ? 'index' : ''"
            :prop="name"
            :label="header"
            :sortable="sortable"
            align="center"
            :width="width"
            v-if="(titleFilter.length>0 && titleList.length>0 && titleList.indexOf(header) != '-1') || titleFilter.length==0">
        <template slot-scope="scope">
            <span v-if="editor === 'index'">{{ scope.$index + 1 }}</span>
            <template v-else-if="editor === 'checkbox'">
                <label role="checkbox" class="el-checkbox"
                       :class="scope.row.checked ? 'is-checked' : ''" @click.stop="checkItem(scope.row)">
                    <span class="el-checkbox__input">
                        <span class="el-checkbox__inner"></span>
                        <input type="checkbox" aria-hidden="true"
                               class="el-checkbox__original" v-model="scope.row.checked"
                               :value="scope.row.checked">
                    </span>
                </label>
            </template>
            <template v-else-if="editor === 'button'">
                <slot :row="scope.row"></slot>
            </template>
            <template v-else-if="selIndex === scope.$index && column === name && edited && editor === 'date'">
                <el-date-picker :format="format"
                                @change="onChange"
                                :type="dateType" :value-format="valueFormat" v-model="scope.row[name]"
                                style="width: calc(100% - 24px);margin: 0 12px;"
                                @click.native.stop="getEditor"></el-date-picker>
            </template>
            <template v-else-if="selIndex === scope.$index && column === name && edited && editor === 'text'">
                <el-input style="width: calc(100% - 24px);margin: 0 12px;" v-model="scope.row[name]"
                          @change="onChange"
                          clearable @click.native.stop="getEditor"></el-input>
            </template>
            <template v-else-if="selIndex === scope.$index && column === name && edited && editor === 'number'">
                <el-input-number style="width: calc(100% - 24px);margin: 0 12px;" v-model="scope.row[name]"
                                 @change="onChange"
                                 clearable @click.native.stop="getEditor"></el-input-number>
            </template>
            <template v-else-if="selIndex === scope.$index && column === name && edited && editor === 'select'">
                <el-select v-model="scope.row[`${name}`]" :multiple="multiple" @change="onChange" placeholder="请选择">
                    <el-option
                            v-for="item in selectList"
                            :key="item.key"
                            :label="item.value"
                            :value="item.key">
                        <span style="float: left">{{ item.key }} - {{ item.value }}</span>
                    </el-option>
                </el-select>
            </template>
            <span class="ep-table-item" :class="edited ? 'is-edited' : ''" v-else>
                <template v-if="Array.isArray(scope.row[name]) && editor === 'select'" v-for="item in selectList">
                    <template v-if="item.key === val" v-for="val in scope.row[name]">
                        {{ item.value }}
                    </template>
                </template>
                <template v-for="item in selectList" v-if="!Array.isArray(scope.row[name]) && editor === 'select' && item.key == scope.row[name]">
                    {{ item.value }}
                </template>
                <template v-if="editor !== 'select'">{{ scope.row[name] }}</template>
            </span>
        </template>
    </el-table-column>
</template>

<script type="es6">
    export default {
        props: {
            fixed: {
                type: String,
                default: 'left'
            },
            width: {
                type: String,
                default: ''
            },
            header: {
                type: String,
                default: ''
            },
            name: {
                type: String,
                default: ''
            },
            editor: {
                type: String,
                default: ''
            },
            sortable: {
                type: Boolean,
                default: false
            },
            format: String,
            valueFormat: String,
            edited: {
                type: Boolean,
                default: false
            },
            dateType: {
                type: String,
                default: ''
            },
            codetype: {
                type: String,
                default: ''
            },
            hidden: {
                type: Boolean,
                default: false
            },
            isChange: {
                type: Boolean,
                default: false
            },
            datas: {
                type: Object,
                default: null
            },
            multiple: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                checked: [],
                time: null
            }
        },
        computed: {
            selIndex() {
                return this.$store.getters.selIndex;
            },
            row() {
                return this.$store.getters.row;
            },
            rowDbClick() {
                return this.$store.getters.dbClick;
            },
            rowIndex() {
                return this.$store.getters.rowIndex;
            },
            column() {
                return this.$store.getters.column;
            },
            codeTypes: {
                get: function () {
                    console.log(this.$store.getters.codeTypes && this.$store.getters.codeTypes.id)
                    let codeTypes = sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
                    return codeTypes;
                },
                set: function (newVal) {
                    if (newVal === null) return;
                    clearInterval(this.time);
                    this.selData(newVal[this.codetype]);
                    return newVal;
                }
            },
            isCodeType(){
                return this.$parent.$parent.isCodeType;
            },
            tableData(){
                return this.$parent.$parent.data.Data || [];
            },
            titleList() {
                return this.$parent.$parent.list || [];
            },
            titleFilter() {
                return this.$parent.$parent.titleFilter || [];
            },
            pathName(){
                return this.$parent.$parent.pathName;
            }
        },
        watch: {
            selIndex: {
                handler(value) {
                    if(!this.edited && this.column == this.name && this.tableData.indexOf(this.row) != '-1' && this.tableData.indexOf(this.row) == value){
                        let obj = {
                            path: this.$route.path + '/doCheck/'+ this.pathName,
                            params: {
                                path: this.$route.path,
                                row:this.row,
                                ...this.datas
                            }
                        };
                        if(this.isCodeType){
                            obj.params.codeTypes = this.codeTypes;
                        }
                        this.$store.dispatch('SET_COMMONPOST', obj);
                    }
                    return value;
                },
                deep: true
            },
            rowIndex: {
                handler(value) {
                    return value;
                },
                deep: true
            },
            codeTypes: {
                handler(value) {
                    if (this.codetype) {
                        this.selData(value[this.codetype]);
                    }
                },
                deep: true
            }
        },
        data() {
            return {
                selectList: []
            }
        },
        mounted() {
            let self = this;
            this.time = setInterval(() => {
                self.codeTypes = sessionStorage.getItem(this.$route.path) && JSON.parse(sessionStorage.getItem(this.$route.path)) || null;
            }, 100);
            document.onclick = function () {
                self.$store.dispatch('SET_INDEX', -1);
            }
        },
        methods: {
            getEditor() {
                this.$store.dispatch('SET_INDEX', this.selIndex);
            },
            checkItem(val) {
                event.preventDefault();
                val.checked = !val.checked;
            },
            selData(value) {
                if (value && value.length > 0) {
                    this.selectList = value;
                }
            },
            onChange() {
                if (!this.isChange) return;
                let obj = {
                    path: this.$route.path + '/doCheck/' + this.name,
                    params: {
                        index: this.rowIndex,
                        path: this.$route.path,
                        codeTypes: this.codeTypes,
                        ...this.datas
                    }
                };
                this.$store.dispatch('SET_COMMONPOST', obj);
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-checkbox.is-checked .el-checkbox__inner {
        background-color: #409eff;
        border-color: #409eff;
    }

    .el-checkbox.is-checked .el-checkbox__inner:after {
        transform: rotate(45deg) scaleY(1);
    }

    .el-checkbox__inner:after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
    }

    .ep-table-item {
        padding: 0 10px;
        display: inherit;
        height: 45px;
        line-height: 45px;
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: center;*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ep-table-item.is-edited {
        background: #f7f7f7 url("../../assets/01.png") no-repeat right top;
    }

    .el-checkbox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        margin: 0 !important;
    }
</style>
